<html>
  <head>
	  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>i5ting_ztree_toc:</title>
		<link href="toc/style/github-bf51422f4bb36427d391e4b75a1daa083c2d840e.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/style/github2-d731afd4f624c99a4b19ad69f3083cd6d02b81d5.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/css/zTreeStyle/zTreeStyle.css" media="all" rel="stylesheet" type="text/css"/>
	  <style>
		pre {
		    counter-reset: line-numbering;
		    border: solid 1px #d9d9d9;
		    border-radius: 0;
		    background: #fff;
		    padding: 0;
		    line-height: 23px;
		    margin-bottom: 30px;
		    white-space: pre;
		    overflow-x: auto;
		    word-break: inherit;
		    word-wrap: inherit;
		}

		pre a::before {
		  content: counter(line-numbering);
		  counter-increment: line-numbering;
		  padding-right: 1em; /* space after numbers */
		  width: 25px;
		  text-align: right;
		  opacity: 0.7;
		  display: inline-block;
		  color: #aaa;
		  background: #eee;
		  margin-right: 16px;
		  padding: 2px 10px;
		  font-size: 13px;
		  -webkit-touch-callout: none;
		  -webkit-user-select: none;
		  -khtml-user-select: none;
		  -moz-user-select: none;
		  -ms-user-select: none;
		  user-select: none;
		}

		pre a:first-of-type::before {
		  padding-top: 10px;
		}

		pre a:last-of-type::before {
		  padding-bottom: 10px;
		}

		pre a:only-of-type::before {
		  padding: 10px;
		}

		.highlight { background-color: #ffffcc } /* RIGHT */
		</style>
  </head>
  <body>
	  <div>
				<div style='width:25%;'>
						<ul id="tree" class="ztree" style='width:100%'>

						</ul>
				</div>
        <div id='readme' style='width:70%;margin-left:20%;'>
          	<article class='markdown-body'>
            	<div style="font-size:48px;font-weight:bold;color:#666;text-align:center;border-bottom:2px solid #ddd;">
《项目实战二》大纲练习
</div>

<p style="text-align:center;">编写人：游戏学院 1506mwebB班</p>


<pre style="background:url(./img/timg.jpg);color:#fff;font-size:18px;line-height:40px;height:300px;">
**讲师：大象**
一组：周梦楠  王强民  陈震
二组：栗搏 邢姗 邓燕 郝天耀
三组：武云斌 孙喜彤 张向向
四组：郑丽君  王洋  陈永辉
</pre>



<h1 id="-01-ionic2">第01单元-认识Ionic2</h1>
<h2 id="-">知识点</h2>
<h3 id="ionic-angular-">ionic和angular区别</h3>
<pre><code>cordova [&#39;kɔ:dəvə] 科尔多瓦
ionic是angular衍生品。
angular好比jquery一样，是单独的JS库，而ionic是对angular的拓展，封装了angular，实现了符合移动端规范的组件
</code></pre><h3 id="ionic-angular-cordova-">ionic/angular和cordova区别</h3>
<pre><code>角色不同：
ionic/angular负责页面实现
cordova负责把实现的页面，包装成原生的应用（apk和ios）
</code></pre><h2 id="-">一、填空题</h2>
<pre><code>1、Angular是一个实现了什么模式的框架?
2、MVVM分别是_________、_________、_________。
3、Angular2和Ionic2的关系是_________。
4、Ionic和cordova的关系是_________。
5、Angular2中模板计算一个表达式或者显示一个数据使用的语法是_________。
6、Angular2指令的前缀是_________。
7、NodeJs自带的包管理器是_________。
8、使用npm安装cordova的命令是_________。
9、npm全局安装的参数是_________。
10、Vue是实现了哪个模式_________。
</code></pre><h2 id="-">二、简答题：</h2>
<pre><code>1、说一下Angular2和Ionic2的关系,Ionic和Cordova的关系


2、简单比较一下Angular2和Vue2这两个框架，并说出他们适用的场景


3、说一下你对js中值类型和引用类型的理解。


4、为什么Vue中的组件的data参数必须是函数
官方文档说明的很准确了，假定存在组件ComponentA，里面定义为
```js
module.exports = {
    props: {
        title: String
    },
    data： {
        test: 1
    }
}
</code></pre><p>在某个Page里面我们定义了如下的模板</p>
<pre><code class="lang-html">&lt;template&gt;
    &lt;div&gt;
        &lt;component-a title=&quot;1&quot;&gt;&lt;/component-a&gt;
        &lt;component-a title=&quot;2&quot;&gt;&lt;/component-a&gt;
    &lt;/div&gt;
&lt;/template&gt;
</code></pre>
<p>When defining a component, data must be declared as a function that returns the initial data object, because there will be many instances created using the same definition. If we still use a plain object for data, that same object will be shared by reference across all instances created! By providing a data function, every time a new instance is created, we can simply call it to return a fresh copy of the initial data.</p>
<pre><code>如果不用function return 每个组件的data都是内存的同一个地址，那一个数据改变其他也改变了，这当然就不是我们想要的。
用function return 其实就相当于申明了新的变量，相互独立，自然就不会有这样的问题
</code></pre><pre><code>js在赋值object对象时，是直接一个相同的内存地址。所以为了每个组件的data独立，采用了这种方式。
</code></pre><p>5、什么是浅拷贝？什么是深拷贝？</p>
<h2 id="-">三、程序分析题</h2>
<p>1、写出如下程序的输出。</p>
<pre><code class="lang-js">var a = 10;
var b = a;
b = 11;
console.log(a);
</code></pre>
<p>2、写出如下程序的输出。结合上一题js说说为什么？</p>
<pre><code class="lang-js">var aJson = {x:10};
var bJson = aJson;
bJson.x = 11;
console.log(aJson.x);
</code></pre>
<p>3、写出如下程序的输出。结合上两个题说说为什么？</p>
<pre><code class="lang-js">var aJson = {x:10};
var bJson = aJson;
bJson = {x: 10};
console.log(aJson.x);
</code></pre>
<h2 id="-">四、技能题</h2>
<p>1、使用Npm在全局安装Ionic,cordova</p>
<p>2、使用Vue加载数据和图片并显示到页面上,只加载第一页的笑话数据即可,接口文档如下：</p>
<p><img src="img/01_joke_data.png" alt="请求数据"></p>
<h2 id="-">五、技巧训练</h2>
<h3 id="angular-typescript-snippets-for-vs-code">Angular TypeScript Snippets for VS Code</h3>
<pre><code class="lang-js">PS D:\bw\share workspaces\ng2\my-i2-app&gt; ionic cordova platform --help

  ionic cordova platform - Manage Cordova platform targets

    Like running cordova platform directly, but adds default Ionic icons and splash screen resources (during add) and
    provides friendly checks.

  Usage:

    $ ionic cordova platform [&lt;action&gt;] [&lt;platform&gt;] [options]

  Inputs:

    action ................... add, remove, or update a platform; ls, check, or save all project platforms
    platform ................. The platform that you would like to add (android, ios)

  Options:

    --no-resources ........... Do not pregenerate icons and splash screen resources (corresponds to add)

  Examples:

    $ ionic cordova platform
    $ ionic cordova platform add ios
    $ ionic cordova platform add android
    $ ionic cordova platform rm ios
</code></pre>
<pre><code>1.添加Android平台支持

在工程目录下执行 ionic platform add android 命令
项目的路径下就会自动生成platform文件夹，里面有一个android文件夹。
添加Android平台支持后就可以打包apk了
在工程目录下执行 ionic build android 命令
会在 xxx\platforms\android\build\outputs\apk下生成android-debug.apk
这种命令生成的apk是用于调试的。
安装到手机
连接手机或者打开模拟器，在xxx\platforms\android\build\outputs\apk下打开命令窗口执行adb install android-debug.apk就能将apk安装在手机或者模拟器上了。
</code></pre><h1 id="-02-ionic-apk-">第02单元-ionic安装和apk打包</h1>
<hr>
<blockquote>
<p>知识迁移：对比学习，学习效率提高5倍</p>
</blockquote>
<h2 id="ionic-angular-vue">ionic安装，对比angular和vue</h2>
<h3 id="step1-set-up-the-development-environment">Step1. Set up the Development Environment</h3>
<pre><code class="lang-js">npm install -g @angular/cli //安装angular cli
npm install -g ionic@latest //安装ionic cli
npm install -g vue-cli      //安装vue 脚手架  
//那react有脚手架吗？安装react呢？
</code></pre>
<h3 id="step2-create-a-new-project">Step2.Create a new project</h3>
<pre><code class="lang-js">vue init webpack my-app //创建vue项目
ng new my-app //创建ng项目
ionic start my-app //创建ionic项目
</code></pre>
<h3 id="step3-serve-the-application">Step3.Serve the application</h3>
<blockquote>
<p>vue启动项目</p>
<pre><code class="lang-js">cd my-app
npm install
npm run dev
</code></pre>
<p>ng启动项目</p>
<pre><code class="lang-js">cd my-app
npm install
ng serve --open
</code></pre>
<p>inoic启动项目</p>
<pre><code class="lang-js">cd my-app
ionic serve
</code></pre>
<h3 id="step4-edit-your-first-angular-component">Step4.Edit your first Angular component</h3>
</blockquote>
<h2 id="apk-cordova-">apk打包,使用cordova技术</h2>
<hr>
<blockquote>
<p>准备工作包括nodejs、cordova、AndroidStudio</p>
</blockquote>
<h3 id="step1-cordova-">Step1、创建一个cordova工程</h3>
<pre><code class="lang-js">cordova create cordovaVue
cd cordovaVue
</code></pre>
<pre><code>config.xml -包含应用相关信息，使用到的插件以及面向的平台
platforms - 包含应用运行平台如 Android 和 iOS 上对应的 Cordova 库
plugins - 包含应用所需插件的 Cordova 库，使得应用能够访问例如照相机和电池状态相关的事项。
www - 包含应用源代码，例如 HTML, JavaScript 和 CSS 文件
hooks - 包含为个性化应用编译系统所需的脚本
</code></pre><h3 id="step2-">Step2、添加安卓平台</h3>
<pre><code class="lang-js">cordova platform add android --save
</code></pre>
<h3 id="step3-vue-">Step3、在vue项目中生成编译完成的源文件</h3>
<pre><code class="lang-js">npm run build
</code></pre>
<h3 id="step4-www">Step4、替换www</h3>
<blockquote>
<p>将cordova项目中的www文件夹下的内容替换为vue项目中生成的dist文件夹中的内容</p>
</blockquote>
<h3 id="step5-cordova-android-">Step5、在cordova项目中创建Android应用</h3>
<pre><code class="lang-js">cordova build android
</code></pre>
<h3 id="step6-android-">Step6、将手机连接在电脑上，运行该 Android 程序</h3>
<pre><code class="lang-js">cordova run android
</code></pre>
<h3 id="step7-">Step7、其他安装</h3>
<pre><code>1、安装sdk版本16 - 25
2、安装jdk1.8
3、安装node.js和CLI脚手架装
4、安装ant
5、安装androidstudio
</code></pre><h2 id="-">知识点</h2>
<h3 id="-">课堂知识</h3>
<hr>
<h4 id="6-cordova-apk-_____-_______-________-">6、为了使cordova正确编译apk文件，需要配置的三个环境变量是<strong>_</strong>、<strong>___</strong>、<strong><em>__</em></strong>。</h4>
<blockquote>
<p>JAVA_HOME PATH ANDROID_HOME</p>
</blockquote>
<h4 id="7-ionic-tabs-_________-">7、Ionic创建以tabs作为模板的项目的命令是<strong><strong>_</strong></strong>。</h4>
<pre><code class="lang-js">ionic start demo tabs
</code></pre>
<h4 id="8-ionic-tutorial-_________-">8、Ionic创建以tutorial作为模板的项目的命令是<strong><strong>_</strong></strong>。</h4>
<pre><code class="lang-js">ionic start demo tutorial
</code></pre>
<h4 id="9-ionic-_________-">9、运行Ionic项目的命令是<strong><strong>_</strong></strong>。</h4>
<pre><code class="lang-js">ionic serve
</code></pre>
<h4 id="10-ionic-android-_________-">10、ionic项目添加android平台的命令是<strong><strong>_</strong></strong>。</h4>
<p>去试试是哪个可能</p>
<pre><code class="lang-js">ionic cordova platform add android --save
ionic platform add android --save
cordova platform add android --save
</code></pre>
<h4 id="1-path-">1、说一下为何要配置PATH环境变量</h4>
<blockquote>
<p>.;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;%APPCAN_PATH%;%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;%SYSTEMROOT%\System32\WindowsPowerShell\v1.0\;C:\Program Files\Git\cmd;%NVM_HOME%;%NVM_SYMLINK%;%SDK_HOME%\tools;%SDK_HOME%\platform-tools;</p>
</blockquote>
<p>用来寻找可执行命令文件的路径，比如以.exe结尾的文件</p>
<h4 id="3-ionic-">3、当命令行提示”ionic既不是内部命令，也不是外部命令”,该如何解决？</h4>
<blockquote>
<p>配置path环境变量</p>
</blockquote>
<p>听不懂，看不明白，讲了也不清楚：去配</p>
<h4 id="5-apk-">5、简述从项目创建到生成apk的几个 步骤。</h4>
<p>第一步：创建项目  Ionic start my-app
第二步：进入项目 cd my-app
第三步：添加平台（android, ios）  ionic platform add android
第三步：添加平台（android, ios）  ionic platform add ios
第四步：打包     ionic cordova build android</p>
<pre><code class="lang-js">
function Parent(){}
function Child(){}
Child.prototype = Parent.prototype;
var c = new Child();
console.log(c instanceof Parent);
console.log(c installof Child);
</code></pre>
<pre><code class="lang-js">
function Child(){}
var c = new Child();
console.log(c.__proto__ === Child.prototype);
</code></pre>
<pre><code class="lang-js">function Parent(){}
function Child(){}
Child.prototype = Parent.prototype;
var c = new Child();
console.log(c.__proto__ === Child.prototype);
console.log(c.__proto__ === Parent.prototype);
</code></pre>
<pre><code class="lang-js">function Parent(){}
function Child(){}
Child.prototype = Parent.prototype;
var c = new Child();
console.log(c.__proto__ === Child.prototype);
console.log(c.__proto__ === Object.prototype);
</code></pre>
<h4 id="-">重点知识</h4>
<blockquote>
<p>所有构造函数，都有prototype属性，该属性指向构造函数指向的prototype对象
所有的实力化对象，都有<strong>proto</strong>原型链，该原型链指向的是它的构造函数所指向的原型对象(prototype对象)</p>
</blockquote>
<h2 id="-">填空题</h2>
<pre><code>1、获得Node版本的命令是__________
2、MVW分别是_________、_________、_________。
3、cnpm和npm的区别是_________。
4、NodeJs全局安装Ionic的命令是_________。
5、Ionic全局安装cordova的命令是_________。
6、为了使cordova正确编译apk文件，需要配置的三个环境变量是_____、_______、________。
7、Ionic创建以tabs作为模板的项目的命令是_________。
8、Ionic创建以tutorial作为模板的项目的命令是_________。
9、运行Ionic项目的命令是_________。
10、ionic项目添加android平台的命令是_________。
</code></pre><h2 id="-">简答题</h2>
<pre><code>1、说一下为何要配置PATH环境变量

2、说一下你对Ionic这个移动端框架的理解

3、当命令行提示”ionic既不是内部命令，也不是外部命令”,该如何解决？

4、Cordova是如何让程序跨平台的？(跨平台的原理)

5、简述从项目创建到生成apk的几个 步骤。
</code></pre><h2 id="-">程序分析题</h2>
<p>1、下面两句输出什么？这些代码实现的是什么功能？</p>
<pre><code>function Parent(){}
function Child(){}
Child.prototype = Parent.prototype;
var c = new Child();
console.log(c instanceof Parent);
console.log(c installof Child);
</code></pre><p>2、下面代码输出什么？请简要描述一下<strong>proto</strong>和prototype的关系。</p>
<pre><code>function Parent(){}
function Child(){}
Child.prototype = Parent.prototype;
var c = new Child();
console.log(c.__proto__ === Child.prototype);
console.log(c.__proto__ === Parent.prototype);
</code></pre><h2 id="-">技能题</h2>
<p>1.以tutorial为模板，新建一个ionic项目</p>
<p>2.使用Vue加载数据和图片并显示到页面上,当页面滑动到底部时，自动加载下一页数据,接口文档如下：
<img src="img/01_joke_data.png" alt="请求数据"></p>
<p>3.修改一个tutorial模板创建的程序，当点击页面上的按钮时，弹出HelloWorld</p>
<h1 id="-03-ionic-">第03单元-Ionic组件(上)</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code> 1. Ionic2中用于给不同平台打包的集成进来的系统叫______。
 2. Ionic2可用于页面间导航的组件是_________。
 3. Ionic2可从屏幕底部滑出，显示确认或取消等选项的组件是_________。
 4. ActionSheetController等Ionic2组件是从哪个包导入的_________。
 5. ActionSheetController实例创建以后必须调用什么方法才能让组件展示在页面上_________。
 6. Ionic用于给用户一些提示消息的通知框的组件是_________。
 7. AlertController创建一个弹出窗调用的方法是_________。
 8. ActionSheetController的每个选项的事件处理回调函数是_________。
 9. 用于在列表项里面展示一个数字的组件是_________。
 10. badges徽章组件的标签是_________。
</code></pre><pre><code>1、Ionic2中用于给不同平台打包的集成进来的系统叫______。
2、Ionic2可用于页面间导航的组件是_________。
3、Ionic2可从屏幕底部滑出，显示确认或取消等选项的组件是_________。
4、ActionSheetController等Ionic2组件是从哪个包导入的_________。
5、ActionSheetController实例创建以后必须调用什么方法才能让组件展示在页面上_________。
6、Ionic用于给用户一些提示消息的通知框的组件是_________。
7、AlertController创建一个弹出窗调用的方法是_________。
8、ActionSheetController的每个选项的事件处理回调函数是_________。
9、用于在列表项里面展示一个数字的组件是_________。
10、badges徽章组件的标签是_________。
</code></pre><h2 id="-">简答</h2>
<pre><code>1、写一下Ionic2中按钮(Button)的用法，并写出只带外边框按钮，圆角按钮，只显示文字按钮需要添加什么样的样式？


2、说一下如何在button组件里面使用图标组件


3、简述ionic引入actionsheet控件的三个步骤。


4、请说明ionic和angular的关系。


5、请说明MintUi和Vue的关系。
</code></pre><h2 id="-">程序分析题</h2>
<p>1、下面程序有什么可以优化的地方？为什么可以这么优化？
<img src="./img/3_01.png" alt="第一张图"></p>
<p>2、下面程序有什么可以优化的地方？为什么可以这么优化？
<img src="./img/3_02.png" alt="第一张图"></p>
<h2 id="-">技能题</h2>
<p>1.使用Vue实现一个购物车功能。
要求：1.可以新增商品;2.可以更改商品数量;3.单价输入后不变;4.总价随商品数量改变而改变</p>
<p>2.为数组添加一个derepeat实例方法，实现数组的去重功能。
例如：var a=[1,2,3,3,2,3,4];
a.derepeat();//a =  [1,2,3,4]</p>
<p>3.实现JS对象的深拷贝(DeepCopy),以避免修改引起的问题。
例如</p>
<pre><code>Var a = {x:10}
Var b = a.deepCopy();
b.x=11;
Console.log(a.x) // 10
</code></pre><h2 id="-">技能训练</h2>
<h1 id="-04-">第04单元-组件(下)</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code>
1、Tabs(选项卡)组件的标签是___________。
2、icon组件的标签是_________。
3、List（列表）组件的标签是_________。
4、列表项的标签是_________。
5、如果要在列表项中隐藏分割线，需要使用的属性是_________。
6、如果要给列表项添加外边距，可以使用的属性是_________。
7、列表项中用于显示头像的组件是_________。
8、ion-buttons组件中控制按钮位置的属性是_________。
9、Ionic2的grid默认布局是多少列_________。
10、Gird组件的布局方案是什么(em,rem,flex.@mediaquery?)_________。
</code></pre><h2 id="-">简答</h2>
<pre><code>1、请说明Vue和Angular各自的技术特点和应用场景。


2、Vue中v-if和v-show有什么区别。


3、说一下页面优化的雅虎14条


4、当页面加载很慢的时候，说说排除性能问题的思路。


5、当页面上有很多css和js的时候，说一说优化思路。
</code></pre><h2 id="-">程序分析题</h2>
<p>1、下面的run和walk方法会输出什么？为什么？</p>
<p><img src="./img/four-01.png" alt="04单元一"></p>
<p>2、下面的语句输出的是什么？为什么？</p>
<p><img src="./img/four-02.png" alt="04单元二"></p>
<h2 id="-">技能题</h2>
<pre><code>1.创建一个ionic以tabs模板为基础的项目，在页面上显示出列表数据


2.在一个tabs模板的项目中的第二个选项卡，实现一个gird布局


3.使用js模拟高级语言的继承，实现当实例化子类的时候，也可以调用父类的方法。
</code></pre><h2 id="-">技能训练</h2>
<h1 id="-05-doc">第05单元-主题化.doc</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code>1、如果要修改ionic2的主题，需要修改的文件是________。
2、改变主题最快的方式是更改哪个属性的值_________。
3、自定义颜色应该添加在哪里_______。
4、less声明变量的方式是________。
5、SASS声明变量的方式是_________。
6、LESS是否可以直接在浏览器使用_________。
7、禁止文本换行的工具属性是_________。
8、给元素增加外边距的工具属性是_________。
9、ion-buttons的工具属性有哪些？_________。
10、Ionic2默认的平台样式是_________。
</code></pre><h2 id="-">简答</h2>
<p>1、如何重写ionic自带的md模式下button样式？</p>
<p><img src="./img/5_01.png" alt="第5单元图片"></p>
<p>2、说一下如何改变一个按钮的样式</p>
<p>3、请分别说出IE,Chrome,Safari,Firefox浏览器的内核和对应css的前缀。</p>
<p>4、什么是JavaScript本地对象、内置对象、宿主对象？</p>
<p>5、列举常见的数组方法，说出他们的常用场景。</p>
<h2 id="-">程序分析题</h2>
<pre><code>1、下面这句话会输出什么？如果我想要每隔一秒输出一个值该怎么修改代码？


2、下面的错误是如何产生的？如何解决？
</code></pre><h2 id="-">技能题</h2>
<pre><code>1.自定义一个颜色，并在一个按钮上应用这个颜色

2.LocalStorage和SessionStorage有什么区别？

3.使用Vue实现一个二级路由，当点击子路由内某一项时，切换一级路由内容
</code></pre><h2 id="-">技能训练</h2>
<h1 id="-06-typescript-">第06单元-TypeScript上</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code>
1、TypeScript全局安装的命令是________。
2、TypeScript语言是面向过程的语言还是面向对象的语言？_________。
3、命令行中将main.ts转为js文件的命令是_________。
4、TypeScript、ES6和JavaScript的关系是什么_________。
5、TypeScript中声明boolean类型的变量如何声明______，如何声明string类型变量______,如何声明number类型变量______。
6、TypeScript中可以接收其他任意类型数据的变量类型是______。
7、TypeScript中如何声明枚举类型_________。
8、TypeScript如果函数没有返回值，则默认返回的类型是______。
9、TypeScript声明只读属性的关键字是_________。
10、TypeScript类的声明的关键字是_________。
</code></pre><h2 id="-">简答</h2>
<pre><code>1、至少说出六种TypeScript的基本数据类型


2、简单比较一下TypeScript和JavaScript，并说出他们的优缺点。


3、简述如何使用TypeScript的接口和继承


4、简述如何使用JS的原型机制模拟面向对象的继承


5、简述JS中静态方法和实例方法的区别
</code></pre><h2 id="-">程序分析题</h2>
<pre><code>1、超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不在具有 hover 和 active ,请问这种问题是如何解决？


2、外层一个id为container的div包含四个带有class为item属性的div元素，但是container的高度为0,这是什么原因造成的？这种现象叫做什么？
</code></pre><h2 id="-">技能题</h2>
<p>1、使用命令行在全局环境中安装TypeScript编译器,并且编写文件转化后，使用node在命令行输出”hello world!”;</p>
<p>2、使用ionic实现微信的多选项卡布局，当点击第一个页面时，出现列表页面。</p>
<p>3、(企业真实应用)使用TypeScript类继承实现策略模式(strategyPattern)，要求如下：
<img src="./img/06_01.png" alt="06单元图片"></p>
<h2 id="-">技能训练</h2>
<h1 id="-07-typescript-">第07单元-TypeScript(下)</h1>
<h2 id="-">知识点</h2>
<pre><code>1、Ionic的FABS组件的标签是____。
2、Ionic的可以响应手势操作的组件是_____。
3、TypeScript声明类的关键字是_________。
4、TypeScript声明接口的关键字是_________。
5、TypeScript类继承的关键字是_________。
6、TypeScript类实现接口的关键字是_________。
7、NodeJs自带的包管理器是_________。
8、TypeScript类中默认的访问修饰符是_________。
9、如果一个父类既不想实例中访问invoke方法，也不想让子类继承invoke方法，则这个方法可以使用的访问修饰符是_________。
10、如何对类进行实例化_________。
</code></pre><h2 id="-">填空题</h2>
<pre><code>二、简答题：
1、JavaScript什么样的值是false？


2、JavaScript中null和undefined有什么区别？


3、比较一下TypeScript和JavaScript的类和继承机制
</code></pre><pre><code>4、写出以下JavaScript的输出，并对undefined、null和notdefined这三种类型简单解释一下。
</code></pre><p><img src="./img/07_1.png" alt=""></p>
<pre><code>5、写出以下JavaScript的输出,并说出还有哪些值可以转为false。
</code></pre><p><img src="./img/07_2.png" alt=""></p>
<h2 id="-">简答</h2>
<pre><code>1、下面这句会输出什么？为什么？
</code></pre><p><img src="./img/07_3.png" alt=""></p>
<pre><code>2、下面这句话有没有错误？为什么？
</code></pre><p><img src="./img/07_4.png" alt=""></p>
<h2 id="-">程序分析题</h2>
<pre><code>1、使用面向对象的观点模拟用户登录操作.
要求:
1.创建用户类User,用户类有username和password属性
2.用户类的构造函数里初始化username和password成员属性
3.在类里面写login方法，当用户名是xiaoming密码是123就返回登录成功。
4.导出这个类
5.在另外一个类中，初始化并且进行登录操作
</code></pre><p>2、(企业真实应用)使用TypeScript类继承接口实现策略模式(strategyPattern)，要求如下：
<img src="./img/07_5.png" alt=""></p>
<h2 id="-">技能题</h2>
<h2 id="-">技能训练</h2>
<h1 id="-08-angular2-">第08单元-Angular2入门</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code>1、Angular是一个实现了什么模式的框架?________。
2、Vue2是一个实现了什么模式的框架？________。
3、Angular2是使用什么语言进行开发的?_________。
4、Angular导入一个模块使用的语句是______，导入重命名的语句是_____。
5、Angular2中导出一个模块使用的关键字是______,导出的语句是______,导出重命名的语句是__________。
6、全局安装angular脚手架工具的命令是______。
7、NodeJs自带的包管理器是_________。
8、Angular脚手架工具以tutorial模板创建项目的命令是_________。
9、进入NodeJs项目后安装依赖的命令是_________。
10、Angular的三大核心是______、______、______。
</code></pre><h2 id="-">简答</h2>
<pre><code>1、Angular的三大核心是什么？


2、Angular的使用路由的三个步骤是什么？


3、什么是模块？什么是模型？什么是组件？


4、组件的装饰器名字是什么？组件中的selector,templateUrl,template,styles,styleUrls各是什么意思？


5、箭头函数是否可以完全替代function普通函数？这两者有什么区别？
</code></pre><h2 id="-">程序分析题</h2>
<pre><code>1、观察序列:1,1,2,3,5,8,13,21......,写一个程序求第n项的值。


2、分析下面程序的输出？为什么？
</code></pre><p><img src="./img/08_1.png" alt="图片">;</p>
<h2 id="-">技能题</h2>
<pre><code>1.使用Angular2创建一个项目完成以下需求：
</code></pre><p><img src="./img/08_2.jpg" alt="图片08_png">;</p>
<pre><code>2.使用Angular2创建一个项目完成以下需求
</code></pre><p><img src="./img/08_3.jpg" alt="图片08_png">;</p>
<h2 id="-">技能训练</h2>
<h1 id="-09-">第09单元-模块和指令</h1>
<h2 id="-">一、填空题</h2>
<pre><code>1、Angular的默认根模块是_______。
2、Angular的三大核心组成部分是_________、_________、_________。
3、Angular数据渲染使用的语法是_________。
4、Angular根模块的装饰器是_________。
5、Angular2数据循环的指令是______。
6、Angular2事件绑定的语法是_________。
7、Angular2属性绑定的语法是______。
8、Angular2双向绑定的指令是_______。
9、Angular2可以用于显示和隐藏元素的指令是______、______。
10、Angular2模块的装饰器是_________。
</code></pre><h2 id="-">二、简答题：</h2>
<pre><code class="lang-html">1、简单比较一下Vue2和Angular2的事件绑定，属性绑定，双向数据绑定的语法。


2、什么是数据双向绑定？


3、Vue2响应数据变化的原理是什么？


4、什么是TypeScript的存取器?


5、简述TypeScript类和接口的继承和实现机制。
</code></pre>
<h2 id="-">三、技能题</h2>
<pre><code>1.完成一个数据双向绑定的功能，当在输入框输入内容的时候，另一行显示同一样的内容
</code></pre><p><img src="./img/9_1.png" alt="图片1"></p>
<pre><code>2.(大搜车面试题)
</code></pre><p><img src="./img/9_2.png" alt="图片1"></p>
<h1 id="-10-">第10单元-组件</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code>1、Angular组件装饰器是_______?
2、MVVM分别是_________、_________、_________。
3、Angular2组件中定义元素标签的是______。
4、实现父组件向子组件传值的要使用的装饰器是______。
5、Angular2实现自定义事件的装饰器是_____。
6、Angular2属性绑定的指令或者说语法是______。
7、Angular2事件绑定的指令或者说语法是______。
8、Angular双向数据绑定的指令是_________。
9、Anguar2如何定义一个类______，如何导出一个类______。
10、Angular组件中如何在组件class中声明变量______，如何在组件class中声明函数______。
</code></pre><h2 id="-">简答</h2>
<pre><code>1、简要说明一下JS是如何模拟类继承的


2、说一下Angular2和Vue2但也组件开发模式有什么异同？


3、说出几个angular的内置指令，并说出他们的用途


4、AMD和CMD有什么区别？说出他们各自的代表性框架。


5、Angular组件之间通信有哪几种方式？
</code></pre><h2 id="-">程序分析题</h2>
<pre><code>1、下面程序会输出什么？为什么？
</code></pre><p><img src="./img/10_1.png" alt="图片1"></p>
<pre><code>2、下面四句代码执行后有什么问题？为什么？
</code></pre><p><img src="./img/10_2.png" alt="图片2"></p>
<h2 id="-">技能题</h2>
<pre><code>1.实现一个父子嵌套的组件，当父组件的input输入值的时候，子组件根据相应的输入值，过滤自己table的列表数据.
输入前：
</code></pre><p><img src="./img/10_3.png" alt="图片3"></p>
<pre><code>输入文字后：
</code></pre><p><img src="./img/10_4.png" alt="图片4"></p>
<pre><code>要求：
1.table作为子组件使用
2.使用双向绑定自动过滤
3.使用@input输入绑定或者@ViewChild的方式皆可
</code></pre><h2 id="-">技能训练</h2>
<h1 id="-11-">第11单元-路由和服务</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code>1、Angular短日期格式的管道是_____?
2、Angular可以进行大写转小写的管道是_________。
3、Angular可以进行小写转大写的管道是_________。
4、Angular可以将JSON对象转为JSON字符串的管道是______。
5、Angular中管道的装饰器是_____，管道类必须实现的接口是_____,管道装饰器和管道接口的引入是从那个模块_______。
6、Angular2指令的前缀是_________。
7、Angular中要使用路由必须引入的模块是_________。
8、Angular中路由在视图上的展示标签是_________，进入路由组件的标签是_______。
9、Angular路由表最基础的两个属性是______。
10、Angular使用哪个方法将路由表传入模块_________。
11、Angular路由表带参数定义的写法是______。
</code></pre><h2 id="-">简答</h2>
<p>1、说一下Vue使用路由的几个步骤。</p>
<p>2、说一下Angular使用路由的几个步骤。</p>
<p>3、说一下angular在普通路由的基础上，如何改造成带参数路由。</p>
<p>4、说一下什么是服务和你对服务的理解。</p>
<p>5、简述什么是依赖注入。</p>
<h2 id="-">程序分析题</h2>
<p>1、以下五个语句的输出是什么？为什么是这个结果？</p>
<p> <img src="./img/11_01.png" alt="图片1"></p>
<p>2、请问下面的这句代码如何优化？为何会产生性能问题？</p>
<h2 id="-">技能题</h2>
<p>1.使用Angular路由实现点击不同的标题的时候，显示不同的内容。如下图所示（图片来自GooglePlay应用商店）
<img src="./img/11_02.png" alt="图片2">
<img src="./img/11_03.png" alt="图片3"></p>
<h2 id="-">技能训练</h2>
<h1 id="-12-">第12单元-表单验证</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code>1、Angular使用带参路由需要引用的两个服务是 _____,这两个服务来自与那个模块?________。
2、我们在组件中获取数据一般自爱哪个钩子中写获取数据方法？_______，这个钩子是在哪个接口中声明的？______。
3、Angular路由表最基础的参数是_______，定义嵌套路由需要在父路由的哪个属性下声明_______。
4、Angular中服务的装饰器是______,是从那个模块引入的______。
5、要想将一个服务注入一个组件，需要在组件的哪个属性里加入服务声明______,注入的时候注入进哪个函数里面_____。
6、Angular中响应式表单需要引入的模块是________。
7、TypeScript类中是否可以写静态方法_______，静态方法的声明关键字是_____。
8、TypeScript中接口中方法是否可以写代码______。
9、npm全局安装的参数是_________。
10、Vue是实现了哪个模式_________。
</code></pre><h2 id="-">简答</h2>
<p>1、TypeScript接口既然不可以写代码，那代码应该在哪里写？</p>
<p>2、说说你对类和接口的理解</p>
<p>3、说说你对面向对象和面向过程的理解。</p>
<p>4、说说js中表单验证可以使用的方式。</p>
<p>5、说出至少五个HTML5新增的表单元素</p>
<h2 id="-">程序分析题</h2>
<p>1、以下程序会输出什么？</p>
<p><img src="./img/12_01.png" alt="图片1"></p>
<p>2、写出如下程序的执行结果。？</p>
<p><img src="./img/12_02.png" alt="图片1"></p>
<h2 id="-">技能题</h2>
<p>1.使用表单驱动型验证表单，实现当用户填写数据后，验证通过，当用户不输入数据的时候，不能通过验证.
通过验证如下图所示:</p>
<p><img src="./img/12_03.png" alt="图片3">
不通过验证如下图所示：
<img src="./img/12_04.png" alt="图片4"></p>
<h2 id="-">技能训练</h2>
<h1 id="-13-">第13单元-前后端通信</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code>1.Html5文档的生命方式是________.
2.CSS3中one-of-type选择器是一种什么样的选择器_______。
3.CSS3变形原点的属性是______。
4、CSS3设置圆角的属性是______。
5、说出至少四种HTML5新增的表单标签______、______、______、_____。
6、说出至少四种HTML5新增的结构标签______、______、______、_____。
7、CSS3中火狐浏览器的属性前缀是______。
8、CSS3中Chrome浏览器的属性前缀是______。
9、JS严格模式下x=10这一句会不会出错？_______，为什么_______。
10、ul是块级还是行内元素_______。
</code></pre><h2 id="-">简答</h2>
<p>1、说一下严格模式的开启方法？并说一下和普通模式有什么区别？</p>
<p>2、简单比较一下块级元素和行内元素有什么主要区别？</p>
<p>3、说一下标准浏览器和IE盒子模型的差异</p>
<h2 id="-">程序分析题</h2>
<p>1.使用Angular的Http服务加载数据和图片并显示到页面上,只加载第一页的笑话数据即可,接口文档如下：</p>
<p><img src="./img/13_01.png" alt=""></p>
<h2 id="-">技能题</h2>
<h2 id="-">技能训练</h2>
<h1 id="-14-">第14单元-生命周期</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code>一、填空题：
1. 关闭浏览器不会造成数据丢失的HTML5存储类型是____
2. 关闭浏览器会清空数据的HTML5存储类型是______。
3. CSS中id,class,标签选择器的权重分别是多少______。
4. 要使用Http服务必须引入的模块是_______。
5. 说出Angular2的http服务至少两种发送请求的方式______。
6. Angular2在哪个方法中写处理返回数据的方法______。
7. Angular2中的 http服务的返回数据转为json要调用的方法是______。
8. REST规范中常用的四种数据请求方式是______，________，______，______,分别对应的语义化含义是______，________，______，______。
9. jQuery.ajax中表示数据返回类型的参数是______
10. 组件和指令都可以使用的生命周期钩子函数是______，________，______，______。
</code></pre><h2 id="-">简答</h2>
<pre><code>1. 如何实现前后端数据通信
</code></pre><h2 id="-">程序分析题</h2>
<h2 id="-">技能题</h2>
<ol>
<li>打印Angular2组件中的生命周期的至少四个钩子函数
如下图所示:</li>
</ol>
<p><img src="./img/14_01.png" alt=""></p>
<h2 id="-">技能训练</h2>
<h1 id="-15-">第15单元-自动化测试</h1>
<h2 id="-">填空题</h2>
<pre><code>1. Angular中国际化的工具是_______。
2. Angular可以使用的测试工具是_________、_________、_________。Angular2中定义类的关键字是_________。
3. Ionic和cordova的关系是_________。
4. Angular2中模板计算一个表达式或者显示一个数据使用的语法是_________。
5. Angular2指令的前缀是_________。
6. NodeJs自带的包管理器是_________。
7. 使用npm安装cordova的命令是_________。
8. npm全局安装的参数是_________。
9. Vue是实现了哪个模式_________。
10. Vue2中组件里面data参数是函数还是对象？_________。
</code></pre><h2 id="-">简答</h2>
<pre><code>1. 简述一下为什么Vue2组件里面的data必须是个函数？
</code></pre><h2 id="-">程序分析题</h2>
<h2 id="-">技能题</h2>
<ol>
<li>使用flex布局实现一个div的左右上下居中。如下图所示</li>
</ol>
<p><img src="./img/15_01.png" alt="十五单元"></p>
<p>2.(大搜车面试题)</p>
<p><img src="./img/15_02.png" alt="十五单元"></p>
<h2 id="-">技能训练</h2>
<h1 id="-16-">第16单元-主页模块</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<h2 id="-">简答</h2>
<pre><code>1、京东或者淘宝首页主要的功能有哪些？


2、试着描述淘宝的rem页面布局方案？


3、高度塌陷是由什么造成的？这个问题怎么解决？


4、请尽可能详细的说一下，从我们在浏览器地址栏输入一个地址到服务器返回页面，整个过程中发什么什么操作?


5、针对上一题所发生的各个操作，对于页面优化我们应该从哪入手？
</code></pre><h2 id="-">程序分析题</h2>
<h2 id="-">技能题</h2>
<pre><code>1.需求分析:
随着互联网经济的到来,电子商务成为一种全新的购物方式。它为销售商和用户提供一个有效的沟通平台，
对销售商来说，他们可以将最新最快最热的商品信息即时反映在网络中；而对于消费者来说，
网店则为他们提供了方便快捷省时的服务，强大的搜索功能让消费者随心所欲地找到自己需要的商品。
主页是为展示企业形象和商品的脸面，主页体验的好坏关系到用户是继续使用还是卸载APP(离开网站)。
2.原型设计:
</code></pre><p><img src="./img/sixteen.png" alt="图片"></p>
<pre><code>3.业务需求：
1.用户可以在广告区看到商城推送的轮播广告
2.用户可以在首页直接进入一些常用功能，如充值、缴费、领券等功能
3.首页下滑可以看到系统根据大数据给用户推荐的个性化商品
4.首页下滑看到排行榜商品，对商品按热度排序
4.技术要求:
1.技术框架采用Ionic2进行整体开发
2.接口需要根据接口文档的描述从网络获取
3.要持有用户信息，以便系统可以根据独特浏览习惯进行商品推荐
5.开发要求:
1.时间：4小时
2.代码量：400行
3.参照产品原型图进行第一版设计
6.功能要求:
1.搭建Ionic项目
2.按照功能需求进行主页布局
3.使用后台推荐接口在首页为用户推荐商品
7.性能要求:
1.减少项目体积
2.将图片制作成精灵图
3.在dns轮询和cdn优化间做合适的取舍
4.编写更高效的算法
</code></pre><h2 id="-">技能训练</h2>
<h1 id="-17-">第17单元-分类模块</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code>1、选择器 :first_child是一个什么样的选择器？____
2、ID选择器是什么样的?______，类选择器是什么样的?_____。
3、后代选择器是什么样的?______，子选择器是什么样的？______。他俩之间有什么区别？______。
4、Angular用于控制元素的显示和隐藏的两个指令是_____和____，这两个指令有什么区别？_____。(面试题)
5、Npm全局安装的参数是______。
6、Npm将依赖保存到依赖项的参数是_____和____。
7、NodeJs自带的包管理器是_________。
8、npm清空缓存的命令是________。
9、NodeJs项目的配置文件是_____，命令行初始化该文件的命令是_____。
10、Angular是一个什么模式的框架？______。
</code></pre><h2 id="-">简答</h2>
<pre><code>1、简述HTML5的存储方式，和它们各自的特点。(面试题)


2、简单比较一下Angular2和Vue2这两个框架，并说出他们适用的场景(面试题)


3、严格模式有什么好处？


4、Vw/vh布局有什么优缺点 ?(面试题)


5、Em布局有什么特点？想对于rem有什么异同？(面试题)
</code></pre><h2 id="-">程序分析题</h2>
<p>1、下图程序的五句话会输出什么？为什么会是这样的结果？</p>
<p><img src="./img/seventh-01.png" alt="十七单元一"></p>
<p>2、下面的TypeScript代码会输出什么？为什么？</p>
<p><img src="./img/seventh-02.png" alt="十七单元一"></p>
<h2 id="-">技能题</h2>
<p>1、使用angular的ngIf和ngShow指令模拟实现选项卡功能，注意不要用路由和组件实现。如下图所示，当我们点击某一个选项卡的时候，出现不同的页面。</p>
<p><img src="./img/seventh-03.png" alt="十七单元一"></p>
<p><img src="./img/seventh-04.png" alt="十七单元一"></p>
<h2 id="-">技能训练</h2>
<h1 id="-18-">第18单元-购物车模块</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code>1、严格模式下执行x=3.4会输出什么?
2、CSS3 提供了阴影效果的是什么属性____。
3、Angular实现全球化的工具是_____。
4、Angular的MVW框架中M指的是___,V指的是_____,W指的是____。
5、如何属性jQuery获取id为np的href属性____。
6、CSS中更改光标样式的CSS属性是____。
7、CSS3径向渐变的属性是________。
8、如果一个TypeScript函数没有返回值，则默认是什么返回类型？_____。
9、jQuery.ajax方法的dataType参数的意思是____,请列举三个它的可选值____、____、______。
10、css中哪个属性可以控制元素的缩放_____。
</code></pre><h2 id="-">简答</h2>
<p>1、跨域问题是B端还是S端造成的?是由该端的什么原因造成的？</p>
<p>2、(接上一题)解决上面那个问题的两种方式是什么？这两种方式具体如何执行？</p>
<p>3、(接上一题)这两种方案的优缺点是什么？</p>
<p>4、什么是块级元素？什么是行内元素?什么是inline-block元素?三者各有什么特点？</p>
<p>5、if(x)这句话作用是什么？会产生什么问题?有没有更好的方式?</p>
<h2 id="-">程序分析题</h2>
<p>1、下面这个函数执行会输出什么语句？</p>
<p><img src="./img/eighth-01.png" alt="十八单元一"></p>
<p>2、（接上一题）加上下面两句话这个 run函数会输出什么？</p>
<p><img src="./img/eighth-02.png" alt="十八单元二"></p>
<p>3、（接上一题）加上下面一句话,run函数会输出什么？</p>
<p><img src="./img/eighth-03.png" alt="十八单元三"></p>
<h2 id="-">技能题</h2>
<p>1、模仿实现淘宝购物车的流程。</p>
<h2 id="-">技能训练</h2>
<h1 id="-19-">第19单元-个人中心模块</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code>1、说出四个HTML5新增的结构元素______、______、______、_____。
2、HTML5中能够提供文本框自动完成功能的元素是______。( 学生工作中反馈)
3、说出六个HTML5新增的表单元素______、____、____、____、____、____。(面试题)
4、设置a标签的链接样式的顺序是_____ 、____ 、____ 、____ 。
5、ng2的生命周期钩子函数中，指令和组件都可以使用的钩子是哪些______ 、____ 、____ 、____。
6、Angular中要使用Http服务，需要导入的模块是______。
7、Angular的三大核心是_____。
8、Angular导入模块重命名的语句是什么______。
9、使用路由功能，需要导入的模块是_______，导入的语句是______。
10、Vue实现的是M-V-VM模式，它们分别是哪三个单词的缩写_____ 、____ 、____。
</code></pre><h2 id="-">简答</h2>
<pre><code>1、比较一下svg和canva两种绘图技术。


2、html和xHtml有什么区别？


3、说说你对html5的认识。


4、说说你对html语义化的了解。 


5、doctype 有什么用处？
</code></pre><h2 id="-">程序分析题</h2>
<p>1、下面的两个立即执行函数会输出什么？这样写主要用于哪些场合？</p>
<p><img src="./img/19_01.png" alt="效果布局"></p>
<p>2、下面的代码有什么可以改进的地方？</p>
<p><img src="./img/19_02.png" alt="效果布局"></p>
<p>3、下面的代码实现了一个什么功能？有什么可以改进的地方？</p>
<p><img src="./img/19_03.png" alt="效果布局"></p>
<h2 id="-">技能题</h2>
<p>1、实现一个布局效果，实现一个div的水平和垂直居中。</p>
<p>2、使用php或者NodeJs的Express框架配合bootstrap实现用户注册和登录功能。
注册页面如下：</p>
<p><img src="./img/19_04.png" alt="注册页面"></p>
<hr>
<p>登录界面如下:</p>
<p><img src="./img/19_05.png" alt="登录页面"></p>
<h1 id="-">总结</h1>
<h2 id="-">知识点</h2>
<h2 id="-">填空题</h2>
<pre><code>1、Angular是一个实现了什么模式的框架?
2、MVVM分别是_________、_________、_________。
3、Angular2和Ionic2的关系是_________。
4、Ionic和cordova的关系是_________。
5、Angular2中模板计算一个表达式或者显示一个数据使用的语法是_________。
6、Angular2指令的前缀是_________。
7、NodeJs自带的包管理器是_________。
8、使用npm安装cordova的命令是_________。
9、npm全局安装的参数是_________。
10、Vue是实现了哪个模式_________。
11、Vue2中组件里面data参数是函数还是对象？_________。
</code></pre><h2 id="-">简答</h2>
<pre><code>1、说一下Angular2和Ionic2的关系,Ionic和Cordova的关系


2、简单比较一下Angular2和Vue2这两个框架，并说出他们适用的场景
</code></pre><h2 id="-">程序分析题</h2>
<h2 id="-">技能题</h2>
<p>1.安装NodeJs和Npm</p>
<p>2.使用Npm在全局安装Ionic,cordova</p>
<p>3.使用Vue加载数据和图片并显示到页面上,只加载第一页的笑话数据即可,接口文档如下：</p>
<p><img src="img/01_joke_data.png" alt="请求数据"></p>
<h2 id="-">技能训练</h2>

          	</article>
        </div>
		</div>
  </body>
</html>
<script type="text/javascript" src="toc/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="toc/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="toc/js/ztree_toc.js"></script>
<script type="text/javascript" src="toc_conf.js"></script>

<SCRIPT type="text/javascript" >
<!--
$(document).ready(function(){
    var css_conf = eval(markdown_panel_style);
    $('#readme').css(css_conf)
    
    var conf = eval(jquery_ztree_toc_opts);
		$('#tree').ztree_toc(conf);
});
//-->
</SCRIPT>